<template>
  <div class="ranking-screen">
    <situation-header title="20240618数字大屏" />
    <main class="main">
      <div class="left">
        <ranking-card title="小学一年级" height="544" setting>1 </ranking-card>
        <ranking-card title="小学二年级" height="398"> 2</ranking-card>
      </div>
      <div class="middle">
        <ranking-card title="小学三年级(黄马甲)活动" height="246" setting> 3</ranking-card>
        <ranking-card title="小学四年级" height="346">4 </ranking-card>
        <ranking-card title="小学无年级" height="334">5 </ranking-card>
      </div>
      <div class="right">
        <ranking-card title="小学刘年级" height="958"> 6</ranking-card>
      </div>
      <div class="bottom">2</div>
    </main>
  </div>
</template>
<script>
import SituationHeader from "@/components/Header.vue";
import RankingCard from "@/components/RankingCard.vue";

export default {
  name: "homeView",
  components: {
    RankingCard,
    SituationHeader,
  },
};
</script>

<style lang="scss" scoped>
.ranking-screen {
  height: 100%;
}
.main {
  height: 100%;
  display: flex;
  margin-top: 26px;
  padding: 0 24px;
  .left,
  .middle,
  .right {
    height: 958px;
  }
  .left,
  .right {
    width: 520px;
  }
  .middle {
    flex: 1;
    margin: 0 16px;
  }
}
</style>
